<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<style type="text/css">
    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

</style>
<title>客户-店铺对应关系 - 云超市</title>
<%--<jsp:include page="../../head.jsp"/>--%>

<div class="" id="app">
    <form class="form-inline" name="myForm" style="margin-bottom:5px;margin-top: 10px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>
        <div class="form-group">
            <input id="custNameInput" class="form-control input-sm" type="text"
                   placeholder="客户名称">
        </div>
        <div class="form-group">
            <input id="shopNameInput" class="form-control input-sm" type="text"
                   placeholder="店铺名称">
        </div>
        <div class="form-group">
            <input id="custCodeInput" class="form-control input-sm" type="text"
                   placeholder="专卖证号">
        </div>
        <div class="form-group">
            <select class="form-control input-sm" id="isExp">
                <option value="-1">--是否试点--</option>
                <option value="是">是</option>
                <option value="否">否</option>
            </select>
        </div>

        <button type="button" class="btn btn-success btn-sm" @click="getOrder(1)"
                title="">查询
        </button>
        <button type="button" title="根据查询条件导出所有记录" @click="exportExcel();"
                class="btn btn-sm btn-info">导出Excel
        </button>
    </form>

    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">客户店铺授权信息</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 365px">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <th>客户名称</th>
                <th>专卖证号</th>
                <th>店铺名称</th>
                <th>创建人</th>
                <th>电话</th>
                <th>是否试点</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(order, index) in orderList">
                <td>{{order.CUST_NAME}}</td>
                <td>{{order.CUST_CODE}}</td>
                <td>{{order.SHOP_NAME}}</td>
                <td>{{order.USER_NAME}}</td>
                <td>{{order.MOBILE}}</td>
                <td>{{order.IS_EXP== '1' ? '是' : '否'}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;" id="pageDiv"></div>

    <form action="${contextPath}/shop/cust2ShopListExportExcel" method="post" id="exportExcel" style="display:none">
        <input type="hidden" name="stringMap['cityName']" :value="queryModel.cityName">
        <input type="hidden" name="stringMap['quXianName']" :value="queryModel.quXianName">
        <input type="hidden" name="stringMap['channelName']" :value="queryModel.channelName">
        <input type="hidden" name="stringMap['empName']" :value="queryModel.empName">
        <input type="hidden" name="stringMap['custName']" :value="queryModel.custName">
        <input type="hidden" name="stringMap['shopName']" :value="queryModel.shopName">
        <input type="hidden" name="stringMap['custCode']" :value="queryModel.custCode">
        <input type="hidden" name="stringMap['isExp']" :value="queryModel.isExp">
    </form>
</div>

<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            users: [],
            licenses: [],
            paths: [],
            queryModel: {
                cityName: '',
                quXianName: '',
                channelName: '',
                empName: '',
                custName: '',
                shopName: '',
                custCode : '',
                isExp : '',
                page: '1',
            },

        },
        methods: {
            getInitData: function () {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getCourierSelectData',
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        if (data.success) {
                            vm.users = data.data.couriers;
                            vm.params.couriers = data.data.couriers;
                            vm.params.drivers = data.data.couriers;
                            vm.params.assists = data.data.couriers;
                            vm.licenses = data.data.licenses;
                            vm.paths = data.data.paths;
                            vm.params.licenses = data.data.licenses;
                            vm.params.paths = data.data.paths;
                            return;
                            $('#courierInput').autocomplete({
                                lookup: vm.couriers,
                                minChars: 0,
                            });
                            $('#driverInput').autocomplete({
                                lookup: vm.drivers,
                                minChars: 0,
                            });
                            $('#licenseInput').autocomplete({
                                lookup: vm.licenses,
                                minChars: 0,
                            });
                            $('#pathInput').autocomplete({
                                lookup: vm.paths,
                                minChars: 0,
                            });
                        } else {
                            layer.msg('获取参数失败');
                        }

                    },
                    error: function (error) {
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });

                $('#beginOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                });

                $('#endOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 0,
                    autoclose: 1,
                    todayHighlight: 0,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                    //startDate:new Date(),
                    //endDate : day1,
                });

                $("#beginOperatorTimeInput").on("change", function () {
                    app.re.beginOperatorTime = this.value
                });

                $("#endOperatorTimeInput").on("change", function () {
                    app.re.endOperatorTime = this.value
                });
            },
            disposeQueryModel : function () {
                var vm = this;
                var cityName  = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();
                var custCode = $("#custCodeInput").val();
                var custName = $("#custNameInput").val();
                var shopName = $("#shopNameInput").val();
                var isExp = $("#isExp").val();

                vm.queryModel.cityName = cityName;
                vm.queryModel.quXianName = quXianName;
                vm.queryModel.channelName = channelName;
                vm.queryModel.empName= empName;
                vm.queryModel.custCode = custCode;
                vm.queryModel.custName = custName;
                vm.queryModel.shopName = shopName;
                vm.queryModel.isExp = isExp;

            },
            getOrder: function (page) {
                var vm = this;
                layer.load(1);
                vm.queryModel.page = page;
                vm.disposeQueryModel();

                $.ajax({
                    url: '${contextPath}/shop/getCust2ShopList',
                    type: 'post',
                    data: {
                        stringMap: vm.queryModel
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var rData = data.data;
                        var dataArray = rData.recordList;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = dataArray
                        laypage({
                            cont: 'pageDiv'
                            , pages: rData.pageCount //总页数
                            , groups: 5 //连续显示分页数
                            , curr: rData.currentPage
                            , skin: '#1E9FFF',
                            jump: function (obj, first) {
                                var curr = obj.curr;
                                if (!first) {
                                    app.getOrder(curr)
                                }
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            exportExcel : function () {
                this.disposeQueryModel();
                $("#exportExcel").submit();
            }
        },
    })
    app.getOrder(1);

    var cityNode, quXianNode, channelNode, empNode, custNode, shopNode;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    custNode = '#custNameInput'
    shopNode = '#shopNameInput'

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>


